<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Content</title>
    <link rel="icon" href="src/icon.png" type="image/png">
    <link rel="stylesheet" href="src/prism.min.css">
    <script src="src/pako.min.js"></script>
    <script src="src/prism.min.js"></script>
    <script src="src/prism-python.min.js"></script>
    <script src="src/markdown-it.min.js"></script>
    <style>
        h1[id*="title"] {
            text-align: center;
        }
        /* 加载指示器的样式 */
        .loader {
            border: 5px solid #f3f3f3; /* Light grey */
            border-top: 5px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1.5s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* 默认不显示 */
        }
        /* 文字样式 */
        .loadingText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-5%, 50%); /* 70% 是相对于加载指示器位置的偏移量 */
            font-size: 16px;
            color: #333;
            display: none; /* 默认不显示 */
        }
        /* 加载指示器的动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <h1 id="title"><a href="https://github.com/JuneWaySue/DisplayContent" target="_blank">Display Content</a></h1>
    <div id="loader" class="loader"></div>
    <div id="loadingText" class="loadingText">loading</div>
    <script>
        function decodeUrlEncodedString(encodedStr) {
            // 替换常见的URL编码字符
            const urlEncodedChars = {
                '%20': ' ', // 空格
                '%21': '!', // 叹号
                '%22': '"', // 双引号
                '%23': '#', // 井号
                '%24': '$', // 美元符号
                '%25': '%', // 百分号
                '%26': '&', // 和号
                '%27': "'", // 单引号
                '%28': '(', // 左括号
                '%29': ')', // 右括号
                '%2A': '*', // 星号
                '%2B': '+', // 加号
                '%2C': ',', // 逗号
                '%2F': '/', // 斜杠
                '%3A': ':', // 冒号
                '%3B': ';', // 分号
                '%3C': '<', // 小于号
                '%3D': '=', // 等于号
                '%3E': '>', // 大于号
                '%3F': '?', // 问号
                '%40': '@', // 花号
                // ... 可以继续添加其他需要的编码
            };

            // 替换所有已知的URL编码字符
            return encodedStr.replace(/%[0-9A-F]{2}/gi, function(match) {
                return urlEncodedChars[match] || match; // 如果没有匹配的编码，则返回原字符
            });
        }

        function getBase64ContentFromUrl(url) {
            // 使用正则表达式匹配 'content' 参数
            const regex = /(?:\?|&)(content=)([^&]+)/;
            const match = url.match(regex);
            if (match && match[2]) {
                // 替换所有已知的URL编码字符并返回参数content的内容
                return decodeURIComponent(decodeUrlEncodedString(match[2]))
                
            }
            return null; // 如果没有匹配到，返回 null
        }

        // 压缩字符串
        function compressString(str) {
            // 将字符串转换为Uint8Array
            var input = new TextEncoder().encode(str);
            // 使用pako进行压缩
            var compressed = pako.deflate(input);
            // 将压缩后的数据转换为Base64字符串
            var compressedBase64 = btoa(String.fromCharCode(...compressed));
            return compressedBase64;
        }

        // 解压缩字符串
        function decompressString(compressedBase64) {
            try {
                // 将Base64字符串转换为Uint8Array
                var compressed = Uint8Array.from(atob(compressedBase64), c => c.charCodeAt(0));
            } catch (error) {
                console.log('Base64 error:', error);
                // 不是Base64字符串，直接返回原文本
                return compressedBase64;
            }
            
            try {
                // 使用pako进行解压缩
                var decompressed = pako.inflate(compressed);
            } catch (error) {
                console.log('pako error:', error);
                try {
                    // 不符合pako的字符串，将Uint8Array还原回原文本，再返回
                    var original_content = decodeURIComponent(escape(atob(btoa(String.fromCharCode.apply(null, compressed)))));
                    return original_content
                } catch (error) {
                    console.log('decodeURIComponent error:', error);
                    // 不符合URI的格式，例如20个1，则返回20个1
                    return compressedBase64
                }
            }
            
            // 将Uint8Array转换回字符串
            var decompressedString = new TextDecoder().decode(decompressed);
            return decompressedString;
        }

        // 显示加载指示器
        function showLoader() {
            loader.style.display = 'block';
            loadingText.style.display = 'block';
        }
        // 隐藏加载指示器
        function hideLoader() {
            loader.style.display = 'none';
            loadingText.style.display = 'none';
        }

        function getContentFromUrl() {
            // 在请求开始之前显示加载指示器
            showLoader();

            const content = getBase64ContentFromUrl(window.location.search);
            const md = window.markdownit();
            if (content) {
                // 假设这是从Python端获取的Base64编码的压缩数据
                var base64EncodedCompressedData = content // 替换为您的Base64字符串

                // 创建 pre 和 code 元素
                var preElement = document.createElement('pre');
                var codeElement = document.createElement('code');

                // 输出解压后的数据
                var markdownText = decompressString(base64EncodedCompressedData);
                var result = md.render(markdownText);
                hideLoader();
                codeElement.className = 'language-markdown';
                preElement.appendChild(codeElement);
                document.body.appendChild(preElement);

                // 使用Prism手动高亮元素
                Prism.highlightElement(codeElement);
                codeElement.innerHTML = result;
            }else{
                function readme(markdownText) {
                    // 渲染 Markdown
                    var result = md.render(markdownText);

                    // 创建 pre 和 code 元素
                    var preElement = document.createElement('pre');
                    var codeElement = document.createElement('code');

                    hideLoader();
                    codeElement.className = 'language-markdown';
                    preElement.appendChild(codeElement);
                    document.body.appendChild(preElement);
                    // 使用Prism手动高亮元素
                    Prism.highlightElement(codeElement);
                    codeElement.innerHTML = result;
                }

                fetch('https://raw.githubusercontent.com/JuneWaySue/DisplayContent/refs/heads/master/README.md')
                    .then(response => response.text())
                    .then(data => readme(data))
                    .catch(error => {
                        console.log('Error:', error);
                        readme('## 获取README.md文件内容失败！')
                    });
            }
        }

        // 当页面加载完毕后，获取并展示内容
        window.onload = getContentFromUrl;
    </script>
</body>
</html>